<template>
  <div class="app-container">
    <el-card>
      <!-- 筛选条件区域 -->
      <div class="filter-container">
        <el-form :model="listQuery" label-width="auto">
          <el-row :gutter="20">
            <el-col :xs="24" :sm="12" :md="12" :lg="6">
              <el-form-item label="日志类型">
                <el-select v-model="listQuery.logType" placeholder="请选择" @change="typeChange">
                  <el-option v-for="item in logTypeList" :key="item" :label="item" :value="item" />
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :xs="24" :sm="12" :md="12" :lg="6">
              <el-form-item label="日志名称">
                <el-select v-model="listQuery.logname" placeholder="请选择">
                  <el-option v-for="item in logNameList" :key="item" :label="item" :value="item" />
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :xs="24" :sm="12" :md="12" :lg="6">
              <el-form-item label="是否成功">
                <el-select v-model="listQuery.succeed" placeholder="请选择">
                  <el-option label="成功" value="成功" />
                  <el-option label="失败" value="失败" />
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :xs="24" :sm="12" :md="12" :lg="6">
              <el-form-item label="日期范围">
                <el-date-picker v-model="dateRange" type="daterange" placeholder="选择日期范围" :picker-options="dateRangeOptions" @change="dateRangeChange" />
              </el-form-item>
            </el-col>
            <el-col :xs="24" :sm="12" :md="12" :lg="6">
              <el-form-item label="登录用户名">
                <el-input v-model.trim="listQuery.loginname" placeholder="请输入登录用户名" @input.native="filterPercentChar" />
              </el-form-item>
            </el-col>
            <el-col :xs="24" :sm="12" :md="12" :lg="6" />
            <el-col :xs="24" :sm="12" :md="12" :lg="6">
              <el-form-item label-width="0">
                <el-button type="primary" @click="handleFilter">查询</el-button>
                <el-button @click="resetList">重置</el-button>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </div>
      <!-- 表格区域 -->
      <el-table :data="list" border highlight-current-row :stripe="true">
        <el-table-column label="#" width="60">
          <template slot-scope="{ $index }">
            <span>{{ $index + (listQuery.page - 1) * listQuery.limit + 1 }}</span>
          </template>
        </el-table-column>
        <el-table-column label="日志类型" prop="logtype" :show-overflow-tooltip="true" />
        <el-table-column label="日志名称" prop="logname" :show-overflow-tooltip="true" />
        <el-table-column label="登录用户名" prop="loginname" :show-overflow-tooltip="true" />
        <el-table-column label="类名称" prop="classname" :show-overflow-tooltip="true" />
        <el-table-column label="方法名称" prop="method" :show-overflow-tooltip="true" />
        <el-table-column label="是否成功" prop="succeed" :show-overflow-tooltip="true" />
        <el-table-column label="创建时间" prop="createtime" width="170" />
        <el-table-column label="备注" prop="message" :show-overflow-tooltip="true" />
        <el-table-column label="请求IP" prop="ip" :show-overflow-tooltip="true" />
      </el-table>
      <!-- 分页区域 -->
      <pagination v-show="total > 0" :total="total" :page.sync="listQuery.page" :limit.sync="listQuery.limit" @pagination="getList" />
    </el-card>
  </div>
</template>

<script>
import { getLog, getLogType, getLogName } from '@/api/base/log'
import Pagination from '@/components/Pagination'

export default {
  name: 'Log',
  components: { Pagination },
  data() {
    return {
      list: [],
      total: 0,
      listQuery: {
        page: 1,
        limit: 10,
        logType: undefined,
        logname: undefined,
        succeed: undefined,
        loginname: undefined,
        startDate: undefined,
        endDate: undefined
      },
      logTypeList: [], // 日志类型
      logNameList: [], // 日志名称
      dateRange: '', // 日期范围
      dateRangeOptions: {
        shortcuts: [
          {
            text: '最近一周',
            onClick(picker) {
              const end = new Date()
              const start = new Date()
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
              picker.$emit('pick', [start, end])
            }
          },
          {
            text: '最近一个月',
            onClick(picker) {
              const end = new Date()
              const start = new Date()
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
              picker.$emit('pick', [start, end])
            }
          },
          {
            text: '最近三个月',
            onClick(picker) {
              const end = new Date()
              const start = new Date()
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
              picker.$emit('pick', [start, end])
            }
          }
        ]
      }
    }
  },
  created() {
    this.getList()
    this.getLogType()
  },
  methods: {
    async getList() {
      try {
        const {
          data: { records, total }
        } = await getLog(this.listQuery)
        this.list = records
        this.total = total
      } catch (error) {
        console.log(error)
      }
    },
    handleFilter() {
      this.listQuery.page = 1
      this.getList()
    },
    resetList() {
      this.listQuery = {
        page: 1,
        limit: 10,
        logType: undefined,
        logname: undefined,
        succeed: undefined,
        loginname: undefined,
        startDate: undefined,
        endDate: undefined
      }
      this.getList()
    },
    dateRangeChange(value) {
      if (value) {
        this.listQuery.startDate = value.split(' - ')[0]
        this.listQuery.endDate = value.split(' - ')[1]
      } else {
        this.listQuery.startDate = undefined
        this.listQuery.endDate = undefined
      }
    },
    // 获取日志类型
    async getLogType() {
      try {
        const {
          data: { logType }
        } = await getLogType()
        this.logTypeList = logType
      } catch (error) {
        console.log(error)
      }
    },
    async typeChange(value) {
      if (!value) {
        return false
      }
      try {
        const { data } = await getLogName(this.listQuery.logType)
        this.logNameList = data
        this.listQuery.logname = undefined
      } catch (error) {
        console.log(error)
      }
    }
  }
}
</script>
